<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市场部</title>
    <link href="https://cdn.bootcss.com/element-ui/2.2.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
    <div id="market_table">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="订单编号"
                    width="300"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    sortable
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="电话"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="depart"
                    label="学院"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="250"
                    :filters="[{ text: '未通话', value: '未通话' }, { text: '已通话', value: '已通话' }, { text: '正在拍摄', value: '正在拍摄' }, { text: '拍摄完成', value: '拍摄完成' }, { text: '订单完成', value: '订单完成' }, { text: '用户中途取消', value: '用户中途取消' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.tag === '已结清' ? 'primary' : 'success'"
                            close-transition>{{scope.row.status}}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--显示已经预约的客户所占学院人数比例-->
    <!--<div id="echarts-1" style="width: 600px;height:400px;"></div>-->
    <!--<div id="echarts-2" style="width: 600px;height: 400px;"></div>-->
    <!--<div id="echarts-3" style="width: 600px;height: 400px;"></div>-->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.2.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
<script>
    new Vue({
        el: '#market_table',
        data(){
            return {
                tableData: []
            }
        },
        methods: {
            filterTag(value, row) {
                return row.status === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
        },
        created: function () {
            var data=  []
            Vue.prototype.$http = axios;
            let _this = this
            this.$http.get('/marketManager/bookingInfo',{
            })
                .then(function (response) {
                    for (let i = 0; i < response.data.length; i++) {
                        var status = response.data[i].status
                        if (status==0){
                            status = '未通话'
                        }
                        else if (status==1){
                            status = '已通话'
                        }
                        else if (status==2){
                            status = '正在拍摄'
                        }
                        else if (status==3){
                            status = '拍摄完成'
                        }
                        else if (status==4){
                            status = '订单完成'
                        }
                        else if (status==-1){
                            status = '用户中途取消'
                        }
                        var obj = {};
                        obj.id = response.data[i].id
                        obj.name = response.data[i].name
                        obj.mobile = response.data[i].mobile
                        obj.depart = response.data[i].depart
                        obj.status = status
                        data[i] = obj
                    }
                    _this.tableData = data
                })
                .catch(function (error) {
                    console.log(error);
                });
            }

    });

    // var myChart1 = echarts.init(document.getElementById('echarts-1'));
    // myChart1.showLoading();
    // $.get('/yuyuebizhong').done(function (data) {
    //     var option = {
    //         title: {
    //             text: '已经预约的客户所占学院人数比例'
    //         },
    //         tooltip: {
    //             trigger: 'item',
    //             formatter: "{a} <br/>{b}: {c} ({d}%)"},
    //         legend: {
    //             data:['销量']
    //         },
    //         xAxis: {
    //             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //         },
    //         yAxis: {},
    //         series: [
    //             {
    //                 name: '预约情况',
    //                 type: 'pie',
    //                 selectedMode: 'single',
    //                 radius: [0, '30%'],
    //                 data: [
    //                     {value:111,name:'数软学院'},
    //                     {value:998,name:'文学院'},
    //                     {value:223,name:'计科学院'}
    //                 ]
    //             },
    //             {
    //                 name:'',
    //                 type:'pie',
    //                 radius: ['40%', '55%'],
    //                 label: {},
    //                 data:[
    //                     {value:11, name:'已拍人数'},
    //                     {value:100, name:'未拍人数'},
    //                     {value:990, name:'已拍人数'},
    //                     {value:8, name:'未拍人数'},
    //                     {value:40, name:'已拍人数'},
    //                     {value:183, name:'未拍人数'},
    //                 ]
    //             }]
    //     };
    //     myChart1.setOption(option);
    // })
    //
    // var myChart2 = echarts.init(document.getElementById('echarts-2'));
    // myChart2.showLoading();
    // $.get('/yuyuequshi').done(function (data) {
    //     var option2 = {
    //         title: {
    //             text: '每周预约趋势折线图'
    //         },
    //         xAxis: {
    //             type: 'category',
    //             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //         },
    //         yAxis: {
    //             type: 'value'
    //         },
    //         series: [{
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line'
    //         }]
    //     };
    //     myChart2.setOption(option2);
    // })
    //
    // var myChart3 = echarts.init(document.getElementById('echarts-3'));
    // myChart3.showLoading();
    // $.get('/shijianfenbu').done(function (data) {
    //     var option3 = {
    //         title:{
    //             text: '一月内预约时间分布柱状图'
    //         },
    //         color: ['#3398DB'],
    //         tooltip : {
    //             trigger: 'axis',
    //             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    //                 type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    //             }
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '4%',
    //             bottom: '3%',
    //             containLabel: true
    //         },
    //         xAxis : [
    //             {
    //                 type : 'category',
    //                 data : ['8:00-10:00', '10:00-12:00', '14:00-16:00', '16:00-18:00'],
    //                 axisTick: {
    //                     alignWithLabel: true
    //                 }
    //             }
    //         ],
    //         yAxis : [
    //             {
    //                 type : 'value'
    //             }
    //         ],
    //         series : [
    //             {
    //                 name:'预约时间',
    //                 type:'bar',
    //                 barWidth: '60%',
    //                 data:[10, 52, 200, 334]
    //             }
    //         ]
    //     }
    //     myChart3.setOption(option3);
    // })

</script>
</html>